<template>
  <div class="content" :style="contentStyle">
    <div
      class="article"
      v-for="(articleItem,index) in item.articles"
      :key="index"
      :style="articleStyle(articleItem)"
      :class="articleItemClass(articleItem)"
    ></div>
    <Audio
      v-if="!item.isFinish"
      @audioStart="audioStart"
      @audioWithSuc="audioWithSuc"
      @audioWithFail="audioWithFail"
      :withText="item.articles[count].name"
      ref="audio"
    />
  </div>
</template>

<script>
import Audio from "../audio.vue"
import { mixins } from "@/common/mixins/assignmentMixins.js"
import {mapActions} from "vuex";
export default {
  components: { Audio },
  mixins: [mixins],
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    this.item.articles.forEach(item=>{
      this.$set(item, "isHit", true)
      this.$set(item, "isPress", false)
    })
    this.$set(this.item.articles[this.count], "isHit", false)
    this.$set(this.item.articles[this.count], "isPress", true)
  },
  computed: {
    articleItemClass(articleItem) {
      return function (articleItem) {
        if (articleItem.isPress && !this.item.isFinish) return "press enlarge"
        if (articleItem.isSuc) return "suc"
        if (articleItem.isLos) return "los"
        if (articleItem.isHit && !this.item.isFinish) return "hit"
  }
    }
  },
  methods: {
    audioStart: function () {
      this.updateOperated({questionIndex:this.questionIndex,param:this.index})
    },
    audioWithSuc: function () {
      this.sucMusic()
      this.$set(this.item.articles[this.count], "isPress", false)
      this.$set(this.item.articles[this.count], "isSuc", true)
      setTimeout(() => {
        this.$set(this.item.articles[this.count], "isSuc", false)
        if (this.count < this.item.articles.length - 1) {
          this.count++
          this.$set(this.item.articles[this.count], "isHit", false)
          this.$set(this.item.articles[this.count], "isPress", true)
        }
        else {
          if(this.isSeedEntery){
            this.setSucLottiePlay()
          }else {
            this.perfectMusic()
          }
          this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
          this.addAnswer({
            id: this.item.id,
            type: true
          })
        }
      }, 3000)
    },
    audioWithFail: function () {
      this.losMusic()
      if(this.isSeedEntery){
            setTimeout(()=>{this.$emit('nextAssignment')},600)
      } else {
              this.$emit("losShow")
          }
      this.$set(this.item.articles[this.count], "isPress", false)
      this.$set(this.item.articles[this.count], "isLos", true)
      setTimeout(() => {
        this.$set(this.item.articles[this.count], "isLos", false)
        this.$set(this.item.articles[this.count], "isPress", true)
      }, 2000)
      this.addAnswer({
        id: this.item.id,
        type: false
      })
    },
    ...mapActions("mainStatus", ["setLoading"])
  },
  watch: {
    activeIndex: function (activeIndex) {
      if (this.index === activeIndex) {
        this.$refs.audio.audioAnimate()
      }
    }
  }
}
</script>

<style scoped lang='stylus'>
@import '../../../common/stylus/content.styl'
.press
  filter grayscale(1) drop-shadow(0px 0px 1rem rgb(254, 172, 81))
.hit
  filter grayscale(1)
</style>
